<template>
  <div class="connect">
    <div class="type">段{{ dataList.time_code ? dataList.time_code : '-' }}</div>
    <div class="data">
      已成交量：{{ dataList.already_delisting_num ? dataList.already_delisting_num : '-' }};
      已摘加权均价：{{ dataList.clear_avg_price ? dataList.clear_avg_price : '-' }};
      售方申报余量：{{ dataList.seller_listing_num ? dataList.seller_listing_num : '-' }};
      购方申报余量：{{ dataList.buyer_listing_num ? dataList.buyer_listing_num : '-' }};
    </div>


  </div>
</template>

<script setup lang="js">
import { ref, inject } from 'vue';

const dataList = inject('timeCodeData')

</script>
<style scoped>
.connect {
  float: left;
  /* width: 426px; */
  height: 30px;
  background: #272E3B;
  border-radius: 2px;
  margin-right: 10px;
}

.type {
  padding: 5px 10px;
  float: left;
  font-size: 12px;
  color: #FFFFFF;
  background: #406CFF;
  border-radius: 2px;
}

.data {
  float: left;
  height: 15px;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  color: #F7F8FA;
  line-height: 15px;
  text-align: left;
  font-style: normal;
  padding: 7px;
}
</style>